<template>
  <el-dialog
      width="500"
      title="编辑"
      v-model="dialogVisible"
      :before-close="handleClose"
      :key="avueFormKey"
      append-to-body>
    <avue-form v-if="actFormOption" ref="avueForm" v-model="formModel" :option="actFormOption"
               @submit="submit"></avue-form>
  </el-dialog>
</template>

<script>
import {deepClone} from "@/utils/util";
import actFormOption from "@/option/start/formEngine/formOption";

export default {
  name: "start-form-edit-dialog",
  computed: {},
  data() {
    return {
      actFormOption: null,
      dialogVisible: false,
      avueFormKey: Math.random(),
      formModel: {},
      formDone: null,
      synchronization: false,
    }
  },
  methods: {
    show(form, synchronization) {
      let option = actFormOption();
      this.formModel = form;
      option.boxType = this.formModel.id ? "edit" : "add";
      option.searchLabelPosition = 'top'
      if (synchronization) {
        option.submitText = "保存并发布"
      }
      option.emptyBtn = !form.id;
      this.actFormOption = option;
      this.dialogVisible = true
      this.synchronization = synchronization === null || synchronization === undefined ? false : synchronization;


    },
    handleClose() {
      this.dialogVisible = false;
      this.formModel = {};
      this.actFormOption = null;
      if (this.formDone) {
        this.formDone();
      }
    },
    submit(val, done) {
      this.formDone = done;
      let form = deepClone(val);
      this.$emit("submit", form, this.synchronization, this.handleClose)
    }

  }
}
</script>

<style scoped>

</style>
